<template>
  <div>
    <div style="display: flex;flex-direction: column">
      <div>
        <div class="left" style="margin-top:20px;display: flex;font-weight: bold;font-size: x-large;width: 700px">
          {{ task_title }}
        </div>
        <div class="right" style="margin-top:20px;width:100px;">
          <el-button type="text" icon="el-icon-back" @click="back">返回</el-button>
        </div>
      </div>
      <el-divider></el-divider>
      <div>
        <div class="left" style="margin-top:10px;display: flex;">
          <el-input v-model="value" placeholder="请输入学号或姓名" >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-input>
          <el-col :span="1"></el-col>
          <el-button type="primary" icon="el-icon-search">搜索</el-button>
        </div>
        <div class="right" style="margin-top:10px;">
          <el-button type="primary" icon="el-icon-receiving">批量打分</el-button>
          <el-button type="danger" icon="el-icon-s-release">批量打回</el-button>
          <el-button type="primary" icon="el-icon-upload">导入成绩</el-button>
          <el-button type="primary" icon="el-icon-download">导出成绩</el-button>
          <el-button type="success" icon="el-icon-download">导出答题详情</el-button>
        </div>
      </div>
    </div>
    <div style="margin-top:20px;margin-right:20px;margin-left:20px;">
      <el-table
        :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
        max-height="700"
        border
        style="width: 100% ;top: 25px">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          fixed
          prop="ID"
          label="ID"
          width="70">
        </el-table-column>
        <el-table-column
          prop="stu_no"
          label="学号"
          width="220">
        </el-table-column>
        <el-table-column
          prop="stu_name"
          label="姓名"
          width="220">
        </el-table-column>
        <el-table-column
          prop="state"
          label="状态"
          width="220">
        </el-table-column>
        <el-table-column
          prop="submittime"
          label="提交时间"
          width="220">
        </el-table-column>
        <el-table-column
          prop="reviewtime"
          label="批阅时间"
          width="220">
        </el-table-column>
        <el-table-column
          prop="chengjiAI"
          label="智能评测成绩"
          width="150">
        </el-table-column>
        <el-table-column
          prop="chengjiFIN"
          label="最终成绩"
          width="150">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="150">
          <template slot-scope="scope" >
            <div v-if="scope.row.iscomplete === false" style="display: flex">
              <el-button type="text" disabled>批阅</el-button>
            </div>
            <div v-else-if="scope.row.iscomplete === true && scope.row.isscore === false">
              <router-link :to="{path: '/article/visit/review', query: {stu_ID: scope.row.stu_ID,zuowenID: scope.row.zuowenID,zwzy_ID:scope.row.zwzy_ID}}">
                <el-button type="primary" size="mini" >批阅</el-button>
              </router-link>
              <el-button size="mini" type="danger" @click="rewrite(scope.row)" style="margin-left: 10px">打回</el-button>
            </div>
            <div v-else>
              <router-link :to="{path: '/article/visit/review', query: {stu_ID: scope.row.stu_ID,zuowenID: scope.row.zuowenID,zwzy_ID:scope.row.zwzy_ID}}">
                <el-button type="warning" size="mini" >重阅</el-button>
              </router-link>
              <el-button size="mini" type="danger" @click="rewrite(scope.row)" style="margin-left: 10px">打回</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="text-align: center;margin-top: 30px;">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="num"
        :page-size="pageSize"
        :page-count="10"
        @current-change="current_change">
      </el-pagination>
    </div>
    <div style="margin-top: 15px"></div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { BaaS } from '@/api/user'
import dayjs from 'dayjs'
var baas = BaaS()

export default {
  data() {
    return {
      id: '',
      task_id: '', //任务题目
      task_title: null,
      zwzy: null,
      num: null, //数据条数,
      row: null,
      pageSize: 10,
      currentPage: 1,
      tableData: null
    }
  },
  computed: {
    ...mapGetters([
      'currentUser'
    ])
  },
  created() {
    this.getParams()
  },
  methods: {
    back() {
      this.$router.push('/article')
    },
    current_change(currentPage) {
      this.currentPage = currentPage
    },
    rewrite(e) {
      console.log(e)
      this.$confirm('此操作将要求学生重新完成该作业, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var BaaS = require('minapp-sdk')
        BaaS.init(baas)
        var Product = new BaaS.TableObject('zuowenzuoye')
        var product = Product.getWithoutData(e.zwzy_ID)
        product.set('iscomplete', false)
        product.set({
          'iscomplete': false,
          'submittime': null
        })
        product.update().then(res => {
          // success
          this.getParams()
          this.$message({
            type: 'success',
            message: '打回成功!'
          })
        }, err => {
          // err
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消打回'
        })
      })
    },
    getParams() {  //获取上个页面数据
      this.task_id = this.$route.query.task_id
      this.task_title = this.$route.query.task_title
      var BaaS = require('minapp-sdk')
      BaaS.init(baas)
      var query = new BaaS.Query()
      var Product = new BaaS.TableObject('zuowenzuoye')
      query.compare('teacher_task', '=', this.$route.query.task_id)
      Product.count().then(num => {
        this.num = num
      })
      Product.setQuery(query).limit(100).find().then(res => {
        // success
        this.zwzy = res.data.objects
        var stuID = []
        for (var m = 0; m < res.data.objects.length; m++) {
          stuID.push(res.data.objects[m].stu_id.toString())
        }
        var stu_table = []
        var stu_info = []
        var query1 = new BaaS.Query()
        var Stu = new BaaS.TableObject('student')
        query1.in('id', stuID)
        Stu.setQuery(query1).find().then(res => {
          stu_info = res.data.objects
          for (var i = 0; i < this.zwzy.length; i++) {
            var state
            if (this.zwzy[i].iscomplete === true) {
              state = '已完成'
            } else {
              state = '未完成'
            }
            stu_table.push({   //类似于JS添加JSON的字典方法，Key对应键值，value对应值
              'ID': i + 1,
              'stu_name': stu_info[i].stu_name,
              'stu_no': stu_info[i].stu_no,
              'reviewtime': this.zwzy[i].reviewtime,
              'submittime': this.zwzy[i].submittime,
              'state': state,
              'chengjiAI': this.zwzy[i].chengjiAI,
              'iscomplete': this.zwzy[i].iscomplete,
              'chengjiFIN': this.zwzy[i].chengjiFIN,
              'zuowenID': this.zwzy[i].zuowenID,
              'stu_ID': this.zwzy[i].stu_id,
              'zwzy_ID': this.zwzy[i].id,
              'isscore': this.zwzy[i].isscore
            })
          }
        })
        console.log(stu_table)
        this.tableData = stu_table
      }, err => {
        // err
      })
    }
  }
}
</script>

<style>
.left{
  width:400px;
  margin-left: 20px;
  float:left;
}
.right{
  width:670px;
  float:right;
  margin-right: 20px;
}
</style>
